<template>
    <div>
        <topWindow></topWindow>
        <div class="main">
            <countryEasyInfo :ccountryID="countryID"></countryEasyInfo>
            <div class="detailmsg">
                <!-- 三张图片元素 -->
                <div class="topbox">
                    <!-- <div class="imgbox">
                        <img class="img" @click="this.showImg(this.imgSrc=require('@/assets/img/picture/qq.jpg'))" :src="'http://10.20.156.223:8080'+countryThreeImg[0].imageAddress" alt="">
                        <div class="title">地图</div>
                    </div>
                    <div class="imgbox">
                        <img class="img" @click="this.showImg(this.imgSrc=require('@/assets/img/picture/qq.jpg'))" :src="'http://10.20.156.223:8080'+countryThreeImg[1].imageAddress" alt="">
                        <div class="title">地理位置</div>
                    </div>
                    <div class="imgbox">
                        <img class="img" @click="this.showImg(this.imgSrc=require('@/assets/img/picture/qq.jpg'))" :src="'http://10.20.156.223:8080'+countryThreeImg[2].imageAddress" alt="">
                        <div class="title">国旗</div>
                    </div> -->
                    <div class="imgbox" v-for="(item,index) in countryThreeImg" :key="index">
                        <img class="img" @click="showImg(baseUrl+item.imageAddress)" :src="baseUrl+item.imageAddress" alt="">
                        <div class="title">{{item.imageContent}}</div>
                    </div>
                </div>
                <!-- 底部国家大盒子 -->
                <div ref="container" class="detailbox">
                    <!--左侧上下滑动的菜单-->
                    <div class="menubox">
                        <div class="menu" :style="{ top: fixedElementTop + 'px' }">
                            <div class="menuitem" :class="{ active: activeIndex === index }" @click="scrollTo(item.primaryTagName)" v-for="(item, index) in countryDetail" :key="index">
                                <img class="menuimg" src="@/assets/img/icon/userimg.png" alt="">
                                <div class="menutitle">{{item.primaryTagName}}</div>
                                <img v-show="activeIndex === index" class="rightimg" src="@/assets/img/icon/right.png" alt="">
                            </div>
                        </div>
                    </div>
                    <!-- 右侧国家详情 -->
                    <div ref="content" class="detail">
                        <div class="detailitem" v-for="(item, index) in countryDetail" :key="index" :id="item.primaryTagName">
                            <h1 class="detailtitle" :class="{ history: item.primaryTagName === '历史概况' }">{{item.primaryTagName}}</h1>
                            <div class="detailiitem" v-for="(iitem, iindex) in item.secondaryTagsVoList" :key="iindex">
                                <h4 class="detailttitle">{{iitem.secondaryTagName}}</h4>
                                <p class="detailmmsg" :class="{historymsg: item.primaryTagName === '历史概况'}">{{iitem.countryInfo}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--蒙层-->
            <div
             class="module"
             v-show="showModule"
             ref="module"
             @click="handleClickOutside">
                <img ref="moduleImg" class="bigimg" :src="imgSrc" alt="">
            </div>
            <bottomWindow></bottomWindow>
        </div>
    </div>
</template>

<script>
import topWindow from '@/components/top_window.vue'
import bottomWindow from '@/components/bottom_window.vue'
import countryEasyInfo from '@/components/countryEasyInfo.vue'
import { apiGet } from '@/assets/js/api'
import { BaseURL } from '@/assets/js/api'
// import { mapState } from 'vuex'

export default {
    name: 'indexView',
    data() {
        return {
            fixedElementTop: 0,
            activeIndex: 0,
            imgSrc: '',
            showModule: false,
            countryThreeImg: [],
            countryDetail: [],
            countryID: '',
            baseUrl: '',
        }
    },
    beforeMount() {
    },
    created() {
        this.countryID = this.$route.query.id;
        this.init()
        this.baseUrl = BaseURL
        console.log(this.countryID);
    },
    mounted() {
        // 监听滚动事件
        window.addEventListener('scroll', this.onScroll);
    },
    unmounted() {
        // 清除事件监听
        window.removeEventListener('scroll', this.onScroll);

    },
    methods: {
        onScroll() {
            // 移动菜单
            const containerTop = this.$refs.container.getBoundingClientRect().top;
            if (containerTop < 0) {
                this.fixedElementTop = Math.abs(containerTop);//更新元素位置
            }else {
                this.fixedElementTop - 0;//重置回顶部
            }

            const sections = this.countryDetail.map(item => {
                const sectionElement = document.getElementById(item.primaryTagName);
                return sectionElement ? sectionElement.getBoundingClientRect() : null;
            }).filter(section => section !== null); // 过滤掉 null 值

            if (sections.length === 0) {
                return; // 如果没有有效的 sections，直接返回
            }

            let closestIndex = 0;
            let closestDistance = Infinity;

            sections.forEach((section, index) => {
            const distance = Math.abs(section.top);
            if (distance < closestDistance) {
                closestDistance = distance;
                closestIndex = index;
            }
            });
            this.activeIndex = closestIndex;
        },
        scrollTo(index) {
            const element = document.getElementById(index);
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' });
            }
        },
        showImg(imgSrc){
            console.log(1);
            this.showModule = true
            this.imgSrc = imgSrc
        },
        // 取消点击图片区域以外的地方时，隐藏蒙层
        handleClickOutside(event) {
            const moduleImg = this.$refs.moduleImg;
            const module = this.$refs.module;
            // 当点击范围是蒙层里面确不是图面里面时触发
            if (module.contains(event.target) && !moduleImg.contains(event.target)) {
                this.showModule = false;
                this.imgSrc = ''
            }
        },
        init(){
            apiGet('/nps/image/getImage', {id: this.countryID}).then(res => {
                this.countryThreeImg = res.data
                console.log(this.countryThreeImg);
            })
            apiGet('/nps/nation/getDetailByCountryId', {id: this.countryID}).then(res => {
                this.countryDetail = res.data.primaryTagsList
            })
        }
    },
    computed: {
        // ...mapState('dataStore', ['countryData'])
    },
    components: {
        topWindow,
        bottomWindow,
        countryEasyInfo
    }
}
</script>

<style scoped lang="scss">
.main {
    margin-top: 60px;
    .countryprofile{
        background-color: $borderColor;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 200px 20px 200px;
        height: 400px;
        .countryimg{
            $imgSize: 350px;
            width: $imgSize;
            height: $imgSize;
            border-top-right-radius: $imgSize/2 - 10px;
        }
        .rightmsg{
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 600px;
            margin-left: 100px;
            .cin_name{
                font-size: 40px;
                font-weight: bold;
            }
            .eng_name{
                color: $themeColor;
                font-size: 40px
            }
            .address{
                font-size: 0.8em;
                margin-top: 40px;
                text-indent: 1.6em;
                color: gray;
            }
        }
    }
    .detailmsg{
        display: flex;
        flex-direction: column;
        padding: 0 40px;
        .topbox{
            display: flex;
            border-bottom: 3px solid $borderColor;
            padding: 50px 0;
            justify-content: space-between;
            .imgbox{
                height: fit-content;
                display: flex;
                flex-direction: column;
                border: 1px solid $borderColor;
                .img{
                    $imgSize: 200px;
                    height: $imgSize;
                }
                .title{
                    margin: 25px auto;
                    font-size: 1.6em;
                    font-weight: bold;
                    text-align: center;
                    color: $themeColor;
                }
            }
        }
        .detailbox{
            display: flex;
            padding: 50px 150px;
            .menubox{
                border-right: 3px solid $borderColor;
                padding: 10px 20px;
                .menu{
                    margin-top: 40px;
                    border-radius: 5px;
                    background-color: rgb(245, 249, 252);
                    display: flex;
                    flex-direction: column;
                    width: 200px;
                    .menuitem{
                        display: flex;
                        align-items: center;
                        padding: 5px 10px;
                        border-radius: 8px;
                        height: 35px;
                        cursor: pointer;
                        .menuimg{
                            $menuImgSize: 20px;
                            width: $menuImgSize;
                        }
                        .menutitle{
                            font-size: 0.8em;
                            font-weight: bold;
                            padding-left: 10px;
                            color: rgb(113, 128, 152)
                        }
                        .rightimg{
                            position: absolute;
                            right: 8px;
                            width: 15px;
                        }
                        &.active {
                            background-color: rgb(0, 67, 149);
                            .menutitle{
                                color: white;
                            }
                        }
                    }
                }
            }
            .detail{
                padding: 0 50px;
                .detailitem{
                    margin-bottom: 70px;
                    .detailtitle{
                        color: $themeColor;
                        font-size: 3em;
                    }
                    .history{
                        color: #000!important;
                    }
                    .detailiitem{
                        .detailttitle{
                            cursor: pointer;
                            font-size: 1.2em;
                            font-weight: bold;
                            height: 1.3em;
                            width: fit-content;
                            color: #000;
                            padding-bottom: -1px;
                            border-bottom: 1px solid #000;
                            margin-top: 20px;
                            margin-bottom: 20px;
                        }
                        .detailmmsg{
                            font-weight: 500;
                            color: gray;
                            white-space: pre-wrap;
                        }
                        .historymsg{
                            // text-indent: 2em;
                        }
                    }
                }
            }
        }
    }
    .module{
        z-index: 999;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
        .bigimg{
        }
    }
}
</style>